<extend name="Base/base" />
<block name="button">
	
	<button class="btn btn-primary" type="submit" form="form"><i class="fa fa-save"></i> {:L('text_save')}</button>
</block>
<block name="body">
	<if condition="$msg">
		<div class="alert alert-danger alert-dismissible fade in" role="alert">
		      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
		      {$msg.warning}

		    </div>
	</if>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4><i class="fa fa-pencil fa-fw"></i>  {$heading_title|default=L('heading_title')}</h4>
		</div>
		<div class="panel-body">
			<form action="" method="post" id="form" class="form-horizontal">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab-general" data-toggle="tab">{:L('text_general')}</a>
					</li>
					<li>
						<a href="#tab-advanced" data-toggle="tab">{:L('text_advanced')}</a>
					</li>
					<li>
						<a href="#tab-image" data-toggle="tab">{:L('text_image')}</a>
					</li>
					<!--<li><a href="#tab-attribute" data-toggle="tab">{:L('text_attribute')}</a></li>-->
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab-general">
						<ul class="nav nav-tabs">
							<foreach name="languages" key="key" item="language">
								<li class="{$key==0?'active':''}">
									<a href="#language{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>
								</li>
							</foreach>
						</ul>					
						<div class="tab-content">

							<foreach name="languages" key="key" item="language">
								<div class="tab-pane {$key?'':'active'}" id="language{$language.language_id}">
									<div class="form-group required">
										<label for="input-title{$language.language_id}" class="col-sm-2 control-label">{:L('entry_title')}</label>
										<div class="col-sm-10">
											<input type="text" name="product_description[{$language.language_id}][title]" value="{$product['product_description'][$language['language_id']]['title']|default=''}" placeholder="{:L('entry_title')}" id="iput-title{$language.language_id}" class="form-control">
											<if condition="isset($msg['title'][$language['language_id']])">
											{:danger_msg($msg['title'][$language['language_id']])}
											</if>
										</div>
									</div>
									<div class="form-group">
										<label for="input-content{$language.language_id}" class="col-sm-2 control-label">{:L('entry_content')}</label>
										<div class="col-sm-10">
											<textarea name="product_description[{$language.language_id}][content]" id="input-content{$language.language_id}" class="form-control summernote" placeholder="{:L('entry_content')}">{$product['product_description'][$language['language_id']]['content']|default=''}</textarea>
										</div>
									</div>
									<div class="form-group">
										<label for="input-meta-title{$language.language_id}" class="col-sm-2 control-label">{:L('entry_meta_title')}</label>
										<div class="col-sm-10">
											<input type="text" name="product_description[{$language.language_id}][meta_title]" value="{$product['product_description'][$language['language_id']]['meta_title']|default=''}" placeholder="{:L('entry_meta_title')}" id="iput-meta-title{$language.language_id}" class="form-control">
											<if condition="isset($msg['meta_title'][$language['language_id']])">
											{:danger_msg($msg['meta_title'][$language['language_id']])}
											</if>
										</div>
									</div>
									<div class="form-group">
										<label for="input-meta-description{$language.language_id}" class="col-sm-2 control-label">{:L('entry_meta_description')}</label>
										<div class="col-sm-10">
											<textarea rows="5"  name="product_description[{$language.language_id}][meta_description]"  placeholder="{:L('entry_meta_description')}" id="input-meta-description{$language.language_id}" class="form-control">{$product['product_description'][$language['language_id']]['meta_description']|default=''}</textarea>
											<if condition="isset($msg['meta_description'][$language['language_id']])">
											{:danger_msg($msg['meta_description'][$language['language_id']])}
											</if>
										</div>
									</div>
									<div class="form-group">
										<label for="input-meta-keyword{$language.language_id}" class="col-sm-2 control-label">{:L('entry_meta_keyword')}</label>
										<div class="col-sm-10">
											<textarea rows="5"  name="product_description[{$language.language_id}][meta_keyword]"  placeholder="{:L('entry_meta_keyword')}" id="input-meta-description{$language.language_id}" class="form-control">{$product['product_description'][$language['language_id']]['meta_keyword']|default=''}</textarea>
											<if condition="isset($msg['meta_keyword'][$language['language_id']])">
											{:danger_msg($msg['meta_keyword'][$language['language_id']])}
											</if>
										</div>
									</div>
								</div>
							</foreach>
						</div>
					</div>
					<div class="tab-pane" id="tab-advanced">

						<div class="form-group">
							<label for="input-image" class="control-label col-sm-2">{:L('entry_image')}</label>
							<div class="col-sm-10">
								<a href="" id="thumb-image" data-toggle="image" class="img-thumbnail"><img src="{$product['thumb']}" alt="" title="" data-placeholder="{$product['placeholder']}" /></a>
                  				<input type="hidden" name="image" value="{$product['image']|default=''}" id="input-image" />
							</div>
						</div>

						<div class="form-group">
							<label for="input-category" class="col-sm-2 control-label">{:L('entry_category')}</label>
							<div class="col-sm-10">
								<select name="category_id" id="input-category" class="form-control">
									<foreach name="categories" item="item">
										<option value="{$item.category_id}" <if condition="isset($product['category_id']) && $item['category_id'] eq $product['category_id']">selected</if>>{$item.html}{$item.title}</option>
									</foreach>
								</select>
							</div>
						</div>
						<!--<div class="form-group">-->
							<!--<label for="input-product" class="col-sm-2 control-label">{:L('entry_related')}</label>-->
							<!--<div class="col-sm-10">-->
								<!--<input type="text" id="input-product" name="product_title"  class="form-control" placeholder="{:L('entry_related')}" autocomplete="off">-->
								<!--<div id="product-related" class="well well-sm" style="height: 150px; overflow: auto;">-->
					                <!--<foreach name="product['product_related']" item="related">-->
					                <!--<div id="product-related{$related.product_id}"><i class="fa fa-minus-circle"></i> {$related.title}-->
					                  <!--<input type="hidden" name="product_related[]" value="{$related.product_id}" />-->
					                <!--</div>-->
					                <!--</foreach>-->
					            <!--</div>-->
							<!--</div>-->
						<!--</div>-->
						<!--<div class="form-group">-->
							<!--<label for="input-download" class="col-sm-2 control-label">{:L('entry_download')}</label>-->
							<!--<div class="col-sm-10">-->
								<!--<input type="text" id="input-download" name="download_name"  class="form-control" placeholder="{:L('entry_download')}" autocomplete="off">-->
								<!--<div id="product-download" class="well well-sm" style="height: 150px; overflow: auto;">-->
					                <!--<foreach name="product['product_download']" item="download">-->
					                <!--<div id="product-download-{$download.download_id}"><i class="fa fa-minus-circle"></i> {$download.name}-->
					                  <!--<input type="hidden" name="product_download[]" value="{$download.download_id}" />-->
					                <!--</div>-->
					                <!--</foreach>-->
					            <!--</div>-->
							<!--</div>-->
						<!--</div>-->
						<div class="form-group">
							<label for="input-sort-order" class="col-sm-2 control-label">{:L('entry_sort_order')}</label>
							<div class="col-sm-10">
								<input type="number" class="form-control" value="{$product['sort_order']|default=''}"  id="input-sort-order" name="sort_order" placeholder="{:L('entry_sort_order')}">
							</div>					
						</div>					
						<div class="form-group">
							<label for="input-status" class="control-label col-sm-2">{:L('text_status')}</label>
							<div class="col-sm-10">
								<select name="status" id="input-status" class="form-control">
									<option value="1">{:L('text_enabled')}</option>
									<option <if condition="isset($product['status']) && ($product['status'] eq 0)">selected</if> value="0">{:L('text_disabled')}</option>						
								</select>
							</div>
						</div>
					</div>

					<div class="tab-pane" id="tab-image">

						<div class="table-responsive">
							<table id="images" class="table table-striped table-bordered table-hover">
								<thead>
				                    <tr>
				                      <th style="width:120px;" class="text-left">{:L('entry_additional_image')}</th>
				                      <th class="text-left">{:L('entry_sort_order')}</th>
				                      <th>{:L('entry_title')}</th>
				                      <th>{:L('text_action')}</th>
				                    </tr>
				                  </thead>				                  
				                  <tbody>
				                  	<foreach name="product['product_image']" key="image_row" item="product_image">
										<tr id="image-row{$image_row}">
					                      <td class="text-left"><a href="" id="thumb-image{$image_row}" data-toggle="image" class="img-thumbnail"><img src="{$product_image.thumb}" alt="" title="" data-placeholder="{$product.placeholder}" /></a><input type="hidden" name="product_image[{$image_row}][image]" value="{$product_image.image}" id="input-image{$image_row}" /></td>
					                      <td class="text-left"><input type="number" name="product_image[{$image_row}][sort_order]" value="{$product_image.sort_order}" placeholder="{:L('entry_sort_order')}" class="form-control" /></td>
					                      <td>
					                      	<ul class="nav nav-tabs">
												<foreach name="languages" key="key" item="language">
													<li class="{$key?'':'active'}">
														<a href="#language{$image_row}-{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>
													</li>
												</foreach>
											</ul>
											<div class="tab-content">
												<foreach name="languages" key="key" item="language">
												<div id="language{$image_row}-{$language.language_id}" class="tab-pane {$key?'':'active'}">
													<textarea class="form-control" rows="5" placeholder="{:L('entry_title')}" name="product_image[{$image_row}][text][{$language.language_id}][title]">{$product_image['text'][$language['language_id']]['title']}</textarea>
												</div>
												</foreach>
											</div>
					                      </td>
					                      <td class="text-left"><button type="button" onclick="$('#image-row{$image_row}').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
					                    </tr>	
									</foreach>
				                  </tbody>
				                  <tfoot>
				                    <tr>
				                      <td colspan="3"></td>
				                      <td class="text-left"><button type="button" onclick="addImage();" data-toggle="tooltip" title="{:L('button_image_add')}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
				                    </tr>
				                  </tfoot>
							</table>
						</div>
					</div>
					<div class="tab-pane" id="tab-attribute">
						<div class="table-responsive">
			                <table id="attribute" class="table table-striped table-bordered table-hover">
			                  	<thead>
			                    	<tr>
			                      		<td class="text-left">{:L('entry_attribute')}</td>
			                      		<td class="text-left">{:L('entry_text')}</td>
			                      		<td></td>
			                    	</tr>
			                  	</thead>
			                <tbody>
			                    <foreach key="attribute_row" name="product['product_attributes']" item="product_attribute">
			                    	<tr id="attribute-row{$attribute_row}">
			                      		<td class="text-left" style="width: 40%;"><input type="text" name="product_attribute[{$attribute_row}][name]" value="{$product_attribute['name']}" placeholder="{:L('entry_attribute')}" class="form-control" />
			                        	<input type="hidden" name="product_attribute[{$attribute_row}][attribute_id]" value="{$product_attribute['attribute_id']}" /></td>
			                      	<td class="text-left">
			                      	<ul class="nav nav-tabs">
			                      	<foreach key="key" name="languages"  item="language">
			                      		<li class="{$key?'':'active'}">
											<a href="#attribute-{$attribute_row}-{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>
										</li>
								  	</foreach>
									</ul>
									<div class="tab-content">
									<foreach name="languages" key="key" item="language">
										<div class="tab-pane {$key?'':'active'}" id="attribute-{$attribute_row}-{$language.language_id}">
			                        	
			                          <textarea name="product_attribute[{$attribute_row}][product_attribute_description][{$language.language_id}][text]" rows="5" placeholder="{:L('entry_text')}" class="form-control">{$product_attribute['product_attribute_description'][$language['language_id']]['text']}</textarea>
			                        </div>
			                        </foreach>
			                        </td>
			                      	<td class="text-left"><button type="button" onclick="$('#attribute-row{$attribute_row}').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
			                    </tr>
			                    </foreach>
			                  </tbody>
			                  <tfoot>
			                    <tr>
			                      <td colspan="2"></td>
			                      <td class="text-left"><button type="button" onclick="addAttribute();" data-toggle="tooltip" title="{:L('button_attribute_add')}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
			                    </tr>
			                  </tfoot>
			                </table>
			              </div>
					</div>
				</div>
			</form>
			
		</div>
		
	</div>
</block>
<block name="script">
	<script type="text/javascript">
		//图片
		var image_row	=	{$image_row|default=0}+1;
		function addImage() {
			html  = '<tr id="image-row' + image_row + '">';
			html += '  <td class="text-left"><a href="" id="thumb-image' + image_row + '"data-toggle="image" class="img-thumbnail"><img src="{$product['placeholder']}" alt="" title="" data-placeholder="{$product['placeholder']}" /></a><input type="hidden" name="product_image[' + image_row + '][image]" value="" id="input-image' + image_row + '" /></td>';
			html += '  <td class="text-left"><input type="text" name="product_image[' + image_row + '][sort_order]" value="" placeholder="{:L('entry_sort_order')}" class="form-control" /></td>';
			html += '	<td>';
            html += '      <ul class="nav nav-tabs">';
							<foreach name="languages" key="key" item="language">
			html += '		<li class="{$key?'':'active'}">';
			html += '			<a href="#language'+image_row+'-{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>';
			html += '		</li>';
							</foreach>
			html += '	  </ul>';
			html += '	<div class="tab-content">';
							<foreach name="languages" key="key" item="language">
			html += '		<div id="language' + image_row + '-{$language.language_id}" class="tab-pane {$key?'':'active'}">';
			html += '			<textarea class="form-control" rows="5" placeholder="{:L('entry_title')}" name="product_image[' + image_row + '][text][{$language.language_id}][title]"></textarea>';
			html += '		</div>';
							</foreach>
			html += '	</div>';
            html += '   </td>';
			html += '  <td class="text-left"><button type="button" onclick="$(\'#image-row' + image_row  + '\').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
			html += '</tr>';

			$('#images tbody').append(html);

			image_row++;
		}
	</script>
	<script type="text/javascript">
		//属性
		var attribute_row={$attribute_row|default=0} + 1;
		function addAttribute(){
			html =	'<tr id="attribute-row'+attribute_row+'">';
          	html +=	'<td class="text-left" style="width: 40%;"><input type="text" name="product_attribute['+attribute_row+'][name]" value="" placeholder="{:L('entry_attribute')}" class="form-control" />';
            html +=	'<input type="hidden" name="product_attribute['+attribute_row+'][attribute_id]" value="" /></td>';
	        html +=  	'<td class="text-left">';
	        html +=	'<ul class="nav nav-tabs">';
	          	<foreach key="key" name="languages"  item="language">
	        html +=  		'<li class="{$key==0?'active':''}">';
			html +=			'<a href="#attribute-'+attribute_row+'-{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>';
			html +=		'</li>';
			  	</foreach>
			html +=	'</ul>';
			html +=	'<div class="tab-content">';
				<foreach name="languages" key="key" item="language">
			html += '		<div class="tab-pane <?php if(!$key) echo 'active'; ?>" id="attribute-'+attribute_row+'-{$language.language_id}">';
	            	
	        html += '      <textarea name="product_attribute['+attribute_row+'][product_attribute_description][{$language.language_id}][text]" rows="5" placeholder="{:L('entry_text')}" class="form-control"></textarea>';
	        html += '    </div>';
	            </foreach>
	        html += '    </td>';
	        html += '  <td class="text-left"><button type="button" onclick="$(\'#attribute-row' + attribute_row + '\').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
	        html += ' </tr>';
	        $('#attribute tbody').append(html);

			attributeautocomplete(attribute_row);

			attribute_row++;
		}

		function attributeautocomplete(attribute_row) {
			url='{:U('Attribute/autocomplete')}';
			$('input[name=\'product_attribute[' + attribute_row + '][name]\']').autocomplete({
				'source': function(request, response) {
					$.ajax({
						url: url+url_splice(url)+'filter_name=' +  encodeURIComponent(request),
						dataType: 'json',
						success: function(json) {
							response($.map(json, function(item) {
								return {
									category: item.attribute_group,
									label: item.name,
									value: item.attribute_id
								}
							}));
						}
					});
				},
				'select': function(item) {
					$('input[name=\'product_attribute[' + attribute_row + '][name]\']').val(item['label']);
					$('input[name=\'product_attribute[' + attribute_row + '][attribute_id]\']').val(item['value']);
				}
			});
		}

		$('#attribute tbody tr').each(function(index, element) {
			attributeautocomplete(index);
		});
	</script>
	<script type="text/javascript">
		//相关
		var autourl='{:U("Product/autocomplete")}';
		$('input[name=\'product_title\']').autocomplete({'source': function(request, response) {
				$.ajax({
					url: autourl + (autourl.indexOf('?')<0?'?':'&') + 'filter_title=' +  encodeURIComponent(request),
					dataType: 'json',
					success: function(json) {
						response($.map(json, function(item) {
							return {
								label: item['title'],
								value: item['product_id']
							}
						}));
					}
				});
			},
			'select': function(item) {
				$('input[name=\'product_title\']').val('');		
				$('#product-related' + item['value']).remove();
				$('#product-related').append('<div id="product-related' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="product_related[]" value="' + item['value'] + '" /></div>');	
			}
		});
		$('#product-related').delegate('.fa-minus-circle', 'click', function() {
			$(this).parent().remove();
		});
	</script>
	<script type="text/javascript">
		//附件
		var downloadurl='{:U("Download/autocomplete")}';
		$('input[name=\'download_name\']').autocomplete({'source': function(request, response) {
				$.ajax({
					url: downloadurl + (downloadurl.indexOf('?')<0?'?':'&') + 'filter_name=' +  encodeURIComponent(request),
					dataType: 'json',
					success: function(json) {
						response($.map(json, function(item) {
							return {
								label: item['name'],
								value: item['download_id']
							}
						}));
					}
				});
			},
			'select': function(item) {
				$('input[name=\'download_name\']').val('');		
				$('#product-download-' + item['value']).remove();
				$('#product-download').append('<div id="product-download-' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="product_download[]" value="' + item['value'] + '" /></div>');	
			}
		});
		$('#product-download').delegate('.fa-minus-circle', 'click', function() {
			$(this).parent().remove();
		});
	</script>
</block>
